<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="never">
    <meta name="renderer" content="webkit">
    <meta
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
            name="viewport">
    <title>弹幕机器人-弹幕看板</title>
    <link rel="apple-touch-icon-precomposed"
          href="../../img/headlogo.png" th:href="@{/img/favicon.png}">
    <link rel="shortcut icon" href="../../img/headlogo.png"
          th:href="@{/img/favicon.png}">
    <link rel="stylesheet" href="../../css/bootstrap.min.css"
          th:href="@{/css/bootstrap.min.css}" type="text/css" media="all">
    <link rel="stylesheet" href="../../css/style.css"
          th:href="@{/css/style.css}" type="text/css" media="all">
    <style>
        .scroll-container {
            overflow: auto; /* 显示滚动条 */
        }

        .container {
            width: 100%; /* 容器宽度 */
            border: 1px solid #ccc; /* 可选：添加边框 */
            overflow: hidden; /* 清除浮动 */
        }

        .left {
            float: left; /* 左浮动 */
            box-sizing: border-box; /* 包含padding和border在内的盒模型 */
            /*padding: 10px; !* 可选：添加内边距 *!*/
        }

        .right {
            float: right; /* 右浮动 */
            box-sizing: border-box; /* 包含padding和border在内的盒模型 */
            /*width: 200px; !* 右侧div宽度 *!*/
            /*padding: 10px; !* 可选：添加内边距 *!*/
        }
    </style>
    <script type="text/javascript" src="../../js/jquery-3.7.0.min.js"
            th:src="@{/js/jquery-3.7.0.min.js}"></script>
    <script type="text/javascript" src="../../js/popper.min.js"
            th:src="@{/js/popper.min.js}"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"
            th:src="@{/js/bootstrap.min.js}"></script>
    <script type="text/javascript" src="../../js/index.js"
            th:src="@{/js/index.js}"></script>
</head>

<body>

<div class="app">
    <div class="card-body">
        <!-- web弹幕显示start -->
        <!--固定区域滚动-->
        <div id="danmuw" class="multi-collapse">
            <div id="danmu" class="scroll-container">
                <!--<div class="danmu-child" uid="0">
                   <span class="danmu-type">弹幕</span><span class="danmu-time">17:02:46</span><span
                       class="danmu-medal">九头蛇 2</span><span class="danmu-guard">舰</span><span
                       class="danmu-vip">爷</span><span class="danmu-manager">管</span><span
                       class="danmu-ul">UL19</span><a href="javasript:void(0)"><span
                       class="danmu-name name-guard">名字</span>:</a><span
                       class="danmu-text">哈哈哈哈</span>
                       <div class="danmu-tips">
                       <ul class="danmu-tips-ul">
                       <li class="danmu-tips-li">禁言</li>
                       <li class="danmu-tips-li">查看</li>
                       <li class="danmu-tips-li">关闭</li>
                       </ul>
                       </div>
               </div>
               <div class="danmu-child" uid="0">
                   <span class="danmu-type">礼物</span><span class="danmu-time">17:02:46</span><a
                       href="javasript:void(0)"><span
                       class="danmu-name name-guard">名字</span></a><span
                       class="danmu-text">赠送了 辣条 x 10</span>
               </div>
               <div class="danmu-child" uid="0">
                   <span class="danmu-type">消息</span><span class="danmu-time">17:02:46</span><a
                       href="javasript:void(0)"><span
                       class="danmu-name name-guard">名字</span></a><span
                       class="danmu-text">已被禁言</span>
               </div>
               <div class="danmu-child" uid="0">
                   <span class="danmu-type">消息</span><span class="danmu-time">17:02:46</span>
                   <span class="danmu-text">欢迎</span><a href="javasript:void(0)"><span
                       class="danmu-name name-guard">名字</span></a><span
                       class="danmu-text">进入直播间</span>
               </div>
               <div class="danmu-child" uid="0">
                   <span class="danmu-type">留言</span><span class="danmu-time">17:02:46</span>
                   <a href="javasript:void(0)"><span
                       class="danmu-name name-guard">名字</span></a><span
                       class="danmu-text">留言了30秒说:我昨天才进入直播见哈哈哈进入直播间</span>
               </div>
                                    <div class="danmu-child">2020-06-18 17:48:59:收到弹幕:九烟慕夏
                   它说:那个框是对面拉比克偷的</div>-->
            </div>
            <div id="danmu_input" class="container">
                <div class="input-group">
                    <input type="text" id="contentText" class="form-control"
                           placeholder="发送一条弹幕"
                           title="上舰私信发送成功后，发送的自定义弹幕，默认空不发送">
                    <button type="button" class="btn btn-success" id="danmu_send_btn">发送</button>
                </div>
            </div>
        </div>
        <!-- web弹幕显示end -->
    </div>
</div>

<script type="text/javascript">
    $(function () {
        let sub_url = getParameterByName("sub")
        if (!$(this).attr("disabled")) {
            openSocket(sub_url, null);
            $(this).attr("disabled", true);
        }
    });

    $(document).on('click', '#danmu_send_btn', function () {
        sendMessage()
    });
    $('#contentText').keypress(function (event){
        if (event.which === 13){
            sendMessage()
        }
    })
    function getParameterByName(name) {
        let url = new URL(window.location.href);
        let params = new URLSearchParams(url.search);

        return params.get(name);
    }
</script>
</body>
</html>
